<template>
	<view class="main dispaly-col-center">
		<view class="box dispaly-col-center">
			<view class="logo">
				<image src="/static/logo1.jpg" mode="aspectFill" />
				<!-- <view class="sj">商家登录</view> -->
			</view>

			<view class="tel-login dispaly-col-center">
				<view class="form">
					<view class="form-item">
						<input type="text" placeholder="请输入账号" maxlength="11" class="t" v-model="formData.username" />
					</view>
					<view class="form-item">
						<input type="password" placeholder="请输入密码" maxlength="12" class="c" v-model="formData.password" />
					</view>
				</view>
				<view class="proxy w-100 dispaly-align-center">
					<view class="dispaly-align-center" @click="proxy = !proxy">
						<view class="q dispaly-align-center">
							<view class="p" v-if="proxy"></view>
						</view>
						<view class="txt">
							<view class="c" :class="proxy ? 'a' : 'c'">记住账号密码</view>
						</view>
					</view>
				</view>
				<view class="btn-box1">
					<view class="btn1 b" @click="login">登录</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { sLogin } from '@/api/apiList.js';

const proxy = ref(false);
let formData = reactive({
	username: '',
	password: ''
});

const login = async () => {
	uni.showLoading({
		title: '登录中'
	});
	if (!formData.username) {
		uni.showToast({
			title: '请输入账号',
			icon: 'none'
		});
		return;
	}
	if (!formData.password) {
		uni.showToast({
			title: '请输入密码',
			icon: 'none'
		});
		return;
	}
	if (proxy.value) {
		uni.setStorageSync('acount', { username: formData.username, password: formData.password, relme: proxy.value });
	} else {
		uni.removeStorageSync('acount');
	}
	const res = await sLogin(formData);
	if (res.code == 200) {
		console.log(res, 'res');
		uni.setStorageSync('sToken', res.token);
		uni.hideLoading();
		uni.showToast({
			title: '登录成功',
			icon: 'none'
		});
		setTimeout(() => {
			uni.navigateTo({
				url: '/pages/index/cancelCode'
			});
		}, 1000);
	} else {
		uni.hideLoading();
		uni.showToast({
			title: res.msg,
			icon: 'none'
		});
		return;
	}
};

onShow(() => {
	let acount = uni.getStorageSync('acount');
	if (acount.username && acount.password) {
		formData.username = acount.username;
		formData.password = acount.password;
		proxy.value = acount.relme;
	}
	console.log(acount);
});
</script>

<style>
page {
	height: 100vh;
	background: rgb(255, 255, 255);
	background: rgb(245, 152, 94);
	background: linear-gradient(180deg, rgba(245, 152, 94, 1) 0%, rgba(255, 128, 102, 1) 0%, rgba(239, 197, 176, 1) 43%, rgba(255, 255, 255, 1) 100%, rgba(249, 142, 95, 1) 100%);
}
</style>

<style lang="scss" scoped>
.btn1 {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 612rpx;
	height: 98rpx;
	border-radius: 12rpx 12rpx 12rpx 12rpx;
	font-family: PingFang SC, PingFang SC;
	font-weight: 400;
	font-size: 28rpx;
}

.b {
	background: linear-gradient(0deg, #f49a5e 0%, #fe4f56 100%);
	color: #ffffff;
}

.tel-login {
	.form {
		margin-top: 166rpx;

		.form-item:first-child {
			margin-bottom: 48rpx;
		}

		.form-item {
			width: 612rpx;
			height: 98rpx;
			background: #ffffff;
			opacity: 0.66;
			border-radius: 12rpx;
			position: relative;

			input {
				width: 612rpx;
				height: 98rpx;
				// background: #ffffff;
				opacity: 0.66;
				padding: 0 24rpx;
			}
		}
	}
}

.main {
	height: 100vh;

	.box {
		.logo {
			image {
				width: 174rpx;
				height: 174rpx;
				border-radius: 12rpx;
			}
			.sj {
				margin-top: 20rpx;
				font-size: 30rpx;
				text-align: center;
			}
		}

		.btn-box1 {
			margin-top: 102rpx;

			.btn1:first-child {
				margin-bottom: 40rpx;
			}
		}

		.tel {
			font-family: PingFang SC, PingFang SC;
			font-weight: 800;
			font-size: 48rpx;
			color: #485658;
			margin-top: 187rpx;
		}
	}
}

.proxy {
	// position: fixed;
	// bottom: 73rpx;
	// left: 0;
	// right: 0;
	display: flex;
	justify-content: flex-start;
	margin-top: 30rpx;
	.q {
		width: 27rpx;
		height: 27rpx;
		border-radius: 50%;
		border: 1rpx solid #d65554;
		margin-right: 10rpx;

		.p {
			width: 20rpx;
			height: 20rpx;
			background-color: #d65554;
			border-radius: 50%;
		}
	}

	.txt {
		font-family: PingFang SC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #b5b5b5;

		.a {
			color: #d65554 !important;
		}
		.c {
			color: #333;
		}
	}
}
</style>
